<template>
  <el-drawer
    v-model="drawerVisible"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    size="1000px"
    :title="drawerProps.title + '客户材料'"
  >
    <div class="client-materials-add">
      <el-form ref="ruleFormRef" label-position="top" require-asterisk-position="right" :rules="rules" :model="formParams">
        <div class="materials-card" v-for="(applicant, index) in formParams.applicantList" :key="index">
          <div class="p-title mb-12">申请人信息</div>
          <div class="form-inline-wrap">
            <el-form-item
              label="申请人类型"
              :prop="`applicantList[${index}].applicationType`"
              :rules="applicantRules.applicationType"
            >
              <el-radio-group v-model="applicant.applicationType">
                <el-radio :value="1">企业</el-radio>
                <el-radio :value="2">个人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="申请人名称" :prop="`applicantList[${index}].username`" :rules="applicantRules.username">
              <div class="flx w-100">
                <el-input class="flx-1 mr-12" v-model="applicant.username" placeholder="请输入申请人名称"></el-input>
                <el-button v-if="applicant.applicationType == 1" type="primary" plain>获取信息</el-button>
                <el-button type="primary" plain>获取历史资料</el-button>
              </div>
            </el-form-item>
            <el-form-item
              label="统一社会信用代码"
              :prop="`applicantList[${index}].creditCode`"
              :rules="applicantRules.creditCode"
              v-if="applicant.applicationType == 1"
            >
              <el-input v-model="applicant.creditCode" placeholder="请输入统一社会信用代码" clearable></el-input>
            </el-form-item>
            <el-form-item
              label="身份证号码"
              :prop="`applicantList[${index}].iDNumber`"
              :rules="applicantRules.iDNumber"
              v-if="applicant.applicationType == 2"
            >
              <el-input v-model="applicant.iDNumber" placeholder="请输入身份证号码" clearable></el-input>
            </el-form-item>
            <el-form-item
              label="详细地址"
              :prop="`applicantList[${index}].detailedAddress`"
              :rules="applicantRules.detailedAddress"
            >
              <el-input v-model="applicant.detailedAddress" placeholder="请输入详细地址" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" :prop="`applicantList[${index}].postalCode`" :rules="applicantRules.postalCode">
              <el-input v-model="applicant.postalCode" placeholder="请输入邮政编码" clearable></el-input>
            </el-form-item>
            <el-form-item
              label="营业执照"
              v-if="applicant.applicationType == 1"
              :prop="`applicantList[${index}].businessLicense`"
              :rules="applicantRules.businessLicense"
            >
              <upload-img accept=".pdf" acceptText="PDF"></upload-img>
            </el-form-item>
            <el-form-item label="主体证明识别（通常为身份证正反面照）" v-if="applicant.applicationType == 2">
              <div class="flx">
                <div class="upload-list">
                  <div class="text-grey">身份证正面(人像)</div>
                  <upload-img></upload-img>
                </div>
                <div class="upload-list ml-12">
                  <div class="text-grey">身份证反面(国徽)</div>
                  <upload-img></upload-img>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="flx-justify-end">
            <el-button type="danger" plain v-if="index > 0" @click="deleteAContact(index)">删除</el-button>
            <el-button type="primary" plain @click="addAContact">添加联系人</el-button>
          </div>
        </div>

        <!-- 商标信息 -->
        <div class="materials-card">
          <div class="p-title mb-12">商标信息</div>
          <div class="flx-top-between">
            <div class="info-item">
              <el-form-item label="商标类型" class="w-100">
                <el-radio-group v-model="formParams.trademarkType">
                  <el-radio value="1">文字</el-radio>
                  <el-radio value="2">图形</el-radio>
                  <el-radio value="2">文字+图形</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商标名称" class="w-100" prop="brandName">
                <div class="flx-justify-between w-100">
                  <el-input class="flx-1 mr-12" v-model="formParams.brandName" placeholder="请输入商标名称" clearable></el-input>
                  <el-button type="primary" plain>生成图样</el-button>
                </div>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否彩色">
                    <el-switch v-model="formParams.color" inline-prompt active-text="是" inactive-text="否" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否肖像">
                    <el-switch v-model="formParams.portrait" inline-prompt active-text="是" inactive-text="否" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="info-item">
              <el-form-item label="商标图片" class="w-100" prop="trademarkPicture">
                <div class="align-center text-grey mr-12" v-if="formParams.color">
                  <upload-img accept=".jpg" acceptText="JPG"></upload-img>
                  <span>彩色图样</span>
                </div>
                <div class="align-center text-grey">
                  <upload-img accept=".jpg" acceptText="JPG"></upload-img>
                  <span v-if="formParams.color">黑白图样</span>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="flx-align-end">
            <el-form-item label="商标说明" prop="description" class="mr-20">
              <el-input type="textarea" :rows="3" v-model="formParams.description"></el-input>
            </el-form-item>
            <el-form-item label="文书格式">
              <div class="flx-justify-between w-100">
                <el-radio-group v-model="formParams.documentFormat">
                  <el-radio value="1">PDF</el-radio>
                  <el-radio value="2">Word</el-radio>
                  <el-radio value="2">PDF+Word</el-radio>
                </el-radio-group>
                <el-dropdown>
                  <el-button type="primary" plain>
                    生成委托书<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>生成空白委托书</el-dropdown-item>
                      <el-dropdown-item>生成商标委托收</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-form-item>
          </div>
        </div>

        <!-- 附件信息 -->
        <attachment-info></attachment-info>

        <!-- @@@@
          销售和材料员两个角色

          销售默认只显示 附件信息及以上内容
          可以展开
          商标分类  材料信息 联系人信息 不必填

          材料员全部显示
          料信息 联系人信息 必填

        @@@-->

        <el-divider v-if="!shoMore">
          <el-button type="primary" link @click="shoMore = true">点击完善更多信息</el-button>
        </el-divider>

        <template v-if="shoMore">
          <!-- 商标分类 -->
          <zc-trademark-category :showModal="false"></zc-trademark-category>

          <!-- 材料信息 -->
          <material-info :portrait="formParams.portrait"></material-info>

          <!-- 联系人信息（默认） -->
          <contact-info></contact-info>
        </template>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button type="primary" plain>暂存</el-button>
      <el-button type="danger" plain @click="refused">拒绝</el-button>
      <el-button type="primary" plain>通过</el-button>
      <el-button type="primary" plain @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>

  <!-- 填写拒绝原因 -->
  <review-rejected v-if="showReviewRejected"></review-rejected>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import UploadImg from "./components/UploadImg.vue";
import AttachmentInfo from "./components/AttachmentInfo.vue";
import ZcTrademarkCategory from "@/components/ZcTrademarkCategory/index.vue";
import MaterialInfo from "./components/MaterialInfo.vue";
import ContactInfo from "./components/ContactInfo.vue";
import ReviewRejected from "./components/ReviewRejected.vue";

const rules = reactive({
  username: [{ required: true, message: "请输入客户姓名" }]
});

const applicantRules = reactive({
  applicationType: [{ required: true, message: "请输入申请人类型" }],
  username: [{ required: true, message: "请输入申请人名称" }],
  creditCode: [{ required: true, message: "请输入统一社会信用代码" }],
  iDNumber: [{ required: true, message: "请输入身份证号码" }],
  detailedAddress: [{ required: true, message: "请输入详细地址" }],
  postalCode: [{ required: true, message: "请输入邮政编码" }],
  businessLicense: [{ required: true, message: "请上传营业执照" }]
});

// 是否显示更多信息
const shoMore = ref(false);

const drawerVisible = ref(false);
const formParams = ref({
  // 申请人信息
  applicantList: [
    {
      // 申请人类型 1 企业 2个人
      applicationType: 1,
      username: "",
      creditCode: "",
      iDNumber: "",
      detailedAddress: "",
      postalCode: "",
      businessLicense: ""
    }
  ],

  // trademarkType  1 文字 2 图形 3文字+图形
  trademarkType: 1,

  // 是否彩色
  color: false,

  // 是否显示肖像
  portrait: true
});
const drawerProps = ref({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = params => {
  drawerProps.value = params;
  drawerVisible.value = true;
  shoMore.value = false;
};

// 添加联系人
const addAContact = () => {
  formParams.value.applicantList.push({
    applicationType: 1,
    username: "",
    creditCode: "",
    iDNumber: "",
    detailedAddress: "",
    postalCode: "",
    businessLicense: ""
  });
};

// 删除联系人
const deleteAContact = index => {
  formParams.value.applicantList.splice(index, 1);
};

// 提交
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      //   await drawerProps.value.api!(drawerProps.value.row);
      //   ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
      //   drawerProps.value.search!();
      //   drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

// 填写拒绝原因
const showReviewRejected = ref(false);
const refused = () => {
  showReviewRejected.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
.client-materials-add {
  .materials-card {
    background: #f5f7fa;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;

    .info-item {
      width: calc(50% - 10px);
    }

    .align-center {
      text-align: center;
    }
  }
  .form-inline-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .el-form-item {
    width: calc(50% - 10px);
  }
}
</style>
